<template>
  <transition name="policy-fade-zoom">
    <div
      class="policy-window glass-card shadow-xl border border-electric-500/30 text-white animate-glass flex flex-col"
      :style="style"
      @mouseenter="$emit('mouseenter')"
      @mouseleave="$emit('mouseleave')"
      v-if="policy"
    >
      <div class="policy-window-scroll flex-1 min-h-0 overflow-y-auto">
        <!-- 顶部渐变条+类别icon -->
        <div class="flex items-center mb-2">
          <span class="inline-block w-1.5 h-7 rounded-full mr-2 animate-gradient-bar" :style="categoryBarStyle"></span>
          <span class="text-base font-bold tracking-widest px-2 py-0.5 rounded bg-gradient-to-r from-electric-500 to-cyan-400 text-black/80 shadow-sm mr-2 animate-pulse">
            {{ policy.category || '政策' }}
          </span>
          <span class="text-xs text-white/60 ml-auto flex items-center">
            <svg v-if="icon" :class="'w-5 h-5 mr-1 ' + iconColor" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><use :xlink:href="icon" /></svg>
            {{ policy.department }}
          </span>
        </div>
        <!-- 主标题 -->
        <h3 class="text-xl font-extrabold mb-1 text-electric-400 animate-title-glow">{{ policy.title }}</h3>
        <!-- 副标题 -->
        <div class="text-xs text-white/60 mb-2 flex items-center gap-2">
          <span>{{ policy.publishDate }}</span>
          <span v-if="policy.status" :class="'status-badge status-' + getStatusClass(policy.status)">{{ policy.status }}</span>
        </div>
        <!-- 基本信息区块 -->
        <div class="rounded-lg bg-white/5 p-2 mb-2 flex flex-wrap gap-x-4 gap-y-1 text-xs font-medium shadow-inner animate-glass">
          <div v-if="policy.department" class="flex items-center gap-1"><span class="text-cyan-300">制定机关:</span><span>{{ policy.department }}</span></div>
          <div v-if="policy.documentNumber||policy.symbol" class="flex items-center gap-1"><span class="text-cyan-300">发文字号:</span><span>{{ policy.documentNumber||policy.symbol }}</span></div>
          <div v-if="policy.writeTime" class="flex items-center gap-1"><span class="text-cyan-300">成文时间:</span><span>{{ policy.writeTime }}</span></div>
          <div v-if="policy.publishDate" class="flex items-center gap-1"><span class="text-cyan-300">公布日期:</span><span>{{ policy.publishDate }}</span></div>
          <div v-if="policy.startTime" class="flex items-center gap-1"><span class="text-cyan-300">施行日期:</span><span>{{ policy.startTime }}</span></div>
          <div v-if="policy.endTime" class="flex items-center gap-1"><span class="text-cyan-300">失效日期:</span><span>{{ policy.endTime }}</span></div>
          <div v-if="policy.level" class="flex items-center gap-1"><span class="text-cyan-300">效力位阶:</span><span>{{ policy.level }}</span></div>
          <div v-if="policy.timeStatus" class="flex items-center gap-1"><span class="text-cyan-300">时效变更:</span><span>{{ policy.timeStatus }}</span></div>
          <div v-if="policy.lawCategory" class="flex items-center gap-1"><span class="text-cyan-300">法规类别:</span><span>{{ policy.lawCategory }}</span></div>
          <div v-if="policy.address2 || policy.address1" class="flex items-center gap-1"><span class="text-cyan-300">适用地区:</span><span>{{ policy.address2 || policy.address1 }}</span></div>
        </div>
        <!-- 摘要 -->
        <p class="text-white/80 text-sm mb-3 line-clamp-3">{{ policy.summary }}</p>
        
        <!-- 亮点轮播 -->
        <div v-if="policy.highlights && policy.highlights.length" class="mb-3">
          <div class="text-cyan-300 text-xs font-bold mb-1 flex items-center">
            <svg class="w-4 h-4 mr-1 text-yellow-300 animate-spin-slow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-dasharray="4 2"/></svg>
            政策亮点
          </div>
          <ul class="text-white/80 text-xs space-y-1 min-h-[20px]">
            <li v-for="(highlight, idx) in policy.highlights" :key="highlight" class="flex items-start space-x-2">
              <span class="inline-block w-2 h-2 rounded-full bg-yellow-400 mt-1"></span>
              <span>{{ highlight }}</span>
            </li>
          </ul>
        </div>
        <!-- 标签动画 -->
        <div v-if="policy.tags && policy.tags.length" class="flex flex-wrap gap-2 mb-2">
          <span v-for="tag in policy.tags.slice(0, 5)" :key="tag"
            class="px-2 py-1 rounded-full text-xs font-bold animate-tag-glow"
            :style="tagStyle(tag)">
            {{ tag }}
          </span>
          <span v-if="policy.tags.length > 5" class="text-white/40 text-xs">+{{ policy.tags.length - 5 }}...</span>
        </div>
        <!-- 政策变迁图示 -->
        <div v-if="evolutionItems.length" class="mb-4">
          <div class="text-purple-300 text-xs font-bold mb-1 flex items-center">
            <svg class="w-4 h-4 mr-1 text-purple-400 animate-spin-slow" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-dasharray="4 2"/></svg>
            政策变迁图示
          </div>
          <div class="relative flex items-center overflow-x-auto py-2 px-1 scrollbar-thin">
            <div class="flex items-center gap-6 min-w-[220px]">
              <template v-for="(item, idx) in evolutionItems">
                <div class="flex flex-col items-center min-w-[80px] relative">
                  <div :class="['w-5 h-5 rounded-full border-2 flex items-center justify-center font-bold text-xs',
                    item.active ? 'bg-purple-400 border-purple-400 text-white shadow-electric-lg animate-timeline-pulse' :
                    'bg-white/10 border-purple-300 text-purple-300']">
                    {{ idx + 1 }}
                  </div>
                  <div class="mt-1 text-xs font-bold" :class="item.active ? 'text-purple-400' : 'text-white/60'">{{ item.label }}</div>
                  <div class="text-[11px] text-white/40">{{ item.date || '' }}</div>
                  <div v-if="idx < evolutionItems.length-1" class="absolute left-full top-2 w-10 h-0.5 bg-gradient-to-r from-purple-400/40 to-white/10"></div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <!-- 发光按钮 固定底部 -->
      <div class="pt-2 pb-1 px-1 sticky bottom-0 bg-gradient-to-t from-[#101a36ee] to-transparent z-10">
        <button
          class="px-4 py-2 bg-gradient-to-r from-electric-500 via-cyan-400 to-electric-500 text-black rounded-lg shadow-lg hover:shadow-cyan-400/60 transition-all w-full font-bold animate-btn-glow relative overflow-hidden"
          @click="goToDetail"
        >
          <span class="relative z-10">查看详情</span>
          <span class="absolute left-0 top-0 w-full h-full pointer-events-none animate-btn-wave"></span>
        </button>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'PolicyWindow',
  props: {
    policy: {
      type: Object,
      required: true
    },
    style: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      highlightIndex: 0,
      highlightTimer: null
    }
  },
  computed: {
    icon() {
      // 可根据类别返回不同icon，示例用svg symbol
      const map = {
        '财税政策': '#icon-cash',
        '产业政策': '#icon-industry',
        '科技政策': '#icon-tech',
        '金融政策': '#icon-finance',
        '文化政策': '#icon-culture',
        '环保政策': '#icon-env',
        '就业政策': '#icon-job'
      }
      return map[this.policy.category] || ''
    },
    iconColor() {
      const map = {
        '财税政策': 'text-yellow-300',
        '产业政策': 'text-cyan-400',
        '科技政策': 'text-pink-400',
        '金融政策': 'text-green-400',
        '文化政策': 'text-purple-400',
        '环保政策': 'text-lime-400',
        '就业政策': 'text-orange-400'
      }
      return map[this.policy.category] || 'text-cyan-300'
    },
    categoryBarStyle() {
      const map = {
        '财税政策': 'background: linear-gradient(180deg,#facc15,#fbbf24,#f59e42);',
        '产业政策': 'background: linear-gradient(180deg,#06b6d4,#22d3ee,#0ea5e9);',
        '科技政策': 'background: linear-gradient(180deg,#f472b6,#a21caf,#f9a8d4);',
        '金融政策': 'background: linear-gradient(180deg,#34d399,#10b981,#22d3ee);',
        '文化政策': 'background: linear-gradient(180deg,#a78bfa,#f472b6,#f9a8d4);',
        '环保政策': 'background: linear-gradient(180deg,#bef264,#4ade80,#22d3ee);',
        '就业政策': 'background: linear-gradient(180deg,#fdba74,#fbbf24,#f59e42);'
      }
      return map[this.policy.category] || 'background: linear-gradient(180deg,#67e8f9,#38bdf8,#0ea5e9);'
    },
    evolutionItems() {
      // 展示政策变迁流程：征求意见、公布、施行、修订、废止等
      const items = []
      if (this.policy.draftDate) items.push({ label: '征求意见', date: this.policy.draftDate, key: 'draftDate' })
      if (this.policy.publishDate) items.push({ label: '公布', date: this.policy.publishDate, key: 'publishDate' })
      if (this.policy.effectiveDate) items.push({ label: '施行', date: this.policy.effectiveDate, key: 'effectiveDate' })
      if (this.policy.reviseDate) items.push({ label: '修订', date: this.policy.reviseDate, key: 'reviseDate' })
      if (this.policy.expireDate || this.policy.invalidDate) items.push({ label: '废止', date: this.policy.expireDate || this.policy.invalidDate, key: 'expireDate' })
      // 按时间排序
      items.sort((a, b) => new Date(a.date || '2100-01-01') - new Date(b.date || '2100-01-01'))
      // 高亮当前阶段
      const now = new Date()
      let activeIdx = 0
      for (let i = 0; i < items.length; i++) {
        const d = new Date(items[i].date)
        if (items[i].date && now >= d) activeIdx = i
      }
      return items.map((item, idx) => ({ ...item, active: idx === activeIdx }))
    },
    currentTimelineIndex() {
      // 当前时间轴高亮项
      return this.timelineItems.findIndex(item => item.key === this.policy.key) !== -1 ? this.timelineItems.findIndex(item => item.key === this.policy.key) : 0
    }
  },
  methods: {
    getStatusClass(status) {
      if (status.includes('生效')) return 'success'
      if (status.includes('即将')) return 'warning'
      if (status.includes('草案')) return 'info'
      if (status.includes('过期')) return 'error'
      return 'info'
    },
    tagStyle(tag) {
      // 渐变色动画标签
      const colors = [
        'linear-gradient(90deg,#facc15,#fbbf24,#f59e42)',
        'linear-gradient(90deg,#06b6d4,#22d3ee,#0ea5e9)',
        'linear-gradient(90deg,#f472b6,#a21caf,#f9a8d4)',
        'linear-gradient(90deg,#34d399,#10b981,#22d3ee)',
        'linear-gradient(90deg,#a78bfa,#f472b6,#f9a8d4)',
        'linear-gradient(90deg,#bef264,#4ade80,#22d3ee)',
        'linear-gradient(90deg,#fdba74,#fbbf24,#f59e42)'
      ]
      const idx = tag.length % colors.length
      return {
        background: colors[idx],
        color: '#222',
        boxShadow: '0 0 8px #fff2,0 2px 8px #0ff2',
        animation: 'tagGlow 2s infinite alternate'
      }
    },
    goToDetail() {
      if (this.policy && this.policy.id) {

        this.$emit('go-detail', this.policy.id)
      }
    }
  },
  beforeUnmount() {
    if (this.highlightTimer) clearInterval(this.highlightTimer)
  }
}
</script>

<style scoped>
.policy-window {
  z-index: 99998;
  background: rgba(16, 26, 54, 0.98);
  box-shadow: 0 4px 24px #00f5ff22;
  padding: 0;
  min-width: 350px;
  max-width: 480px;
  width: 420px;
  max-height: 60vh;
  min-height: 400px;
  border-radius: 20px;
  color: #fff;
  transition: box-shadow 0.2s, background 0.2s;
  backdrop-filter: blur(14px);
  overflow: hidden;
  border: 1.5px solid #00f5ff44;
  display: flex;
  flex-direction: column;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .policy-window {
    min-width: 300px;
    max-width: 350px;
    width: 350px;
    max-height: 70vh;
    min-height: 300px;
  }
}

@media (max-width: 480px) {
  .policy-window {
    min-width: 280px;
    max-width: 320px;
    width: 320px;
    max-height: 80vh;
    min-height: 280px;
  }
}
.policy-window-scroll {
  overflow-y: auto;
  padding: 24px 24px 8px 24px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 52vh;
}
.status-badge {
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 11px;
  margin-left: 4px;
  letter-spacing: 1px;
}
.status-success { background:rgba(34,197,94,0.2); color:#6ee7b7; }
.status-warning { background:rgba(253,224,71,0.2); color:#fde68a; }
.status-info { background:rgba(59,130,246,0.2); color:#93c5fd; }
.status-error { background:rgba(239,68,68,0.2); color:#fca5a5; }
.animate-glass {
  animation: glassFadeIn 0.5s cubic-bezier(.4,2,.6,1) both;
}
@keyframes glassFadeIn {
  0% { opacity:0; transform: scale(0.85) translateY(20px); }
  100% { opacity:1; transform: scale(1) translateY(0); }
}
.animate-title-glow {
  text-shadow: 0 0 8px #0ff, 0 0 16px #0ff2;
  animation: titleGlow 2s infinite alternate;
}
@keyframes titleGlow {
  0% { text-shadow: 0 0 8px #0ff, 0 0 16px #0ff2; }
  100% { text-shadow: 0 0 16px #fff, 0 0 32px #0ff4; }
}
.animate-gradient-bar {
  animation: gradientBar 2s linear infinite alternate;
}
@keyframes gradientBar {
  0% { opacity:0.7; }
  100% { opacity:1; box-shadow:0 0 12px #0ff8; }
}
.animate-btn-glow {
  box-shadow: 0 0 16px #0ff6, 0 2px 8px #0ff2;
  animation: btnGlow 1.5s infinite alternate;
}
@keyframes btnGlow {
  0% { box-shadow: 0 0 8px #0ff2, 0 2px 8px #0ff2; }
  100% { box-shadow: 0 0 24px #0ff8, 0 2px 16px #0ff4; }
}
.animate-btn-wave::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle,#0ff3 0%,#0ff0 80%);
  transform: translate(-50%,-50%) scale(0.7);
  opacity: 0.3;
  pointer-events: none;
  animation: btnWave 2.5s infinite linear;
}
@keyframes btnWave {
  0% { opacity:0.3; transform:translate(-50%,-50%) scale(0.7); }
  100% { opacity:0.1; transform:translate(-50%,-50%) scale(1.1); }
}
.animate-tag-glow {
  animation: tagGlow 2s infinite alternate;
}
@keyframes tagGlow {
  0% { box-shadow: 0 0 4px #fff2,0 2px 8px #0ff2; }
  100% { box-shadow: 0 0 12px #0ff8,0 2px 16px #0ff4; }
}
.animate-highlight {
  animation: highlightFade 0.7s cubic-bezier(.4,2,.6,1) both;
}
@keyframes highlightFade {
  0% { opacity:0; transform:translateY(10px); }
  100% { opacity:1; transform:translateY(0); }
}
.policy-fade-zoom-enter-active, .policy-fade-zoom-leave-active {
  transition: all 0.35s cubic-bezier(.4,2,.6,1);
}
.policy-fade-zoom-enter-from, .policy-fade-zoom-leave-to {
  opacity: 0;
  transform: scale(0.85) translateY(20px);
}
.policy-fade-zoom-enter-to, .policy-fade-zoom-leave-from {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.highlight-fade-enter-active, .highlight-fade-leave-active {
  transition: all 0.5s cubic-bezier(.4,2,.6,1);
}
.highlight-fade-enter-from, .highlight-fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
.highlight-fade-enter-to, .highlight-fade-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.3);
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.policy-timeline {
  scrollbar-width: thin;
  scrollbar-color: #00f5ff44 #101a36;
}
.policy-timeline::-webkit-scrollbar {
  height: 6px;
}
.policy-timeline::-webkit-scrollbar-thumb {
  background: #00f5ff44;
  border-radius: 4px;
}
.animate-timeline-pulse {
  animation: timelinePulse 1.5s infinite alternate;
}
@keyframes timelinePulse {
  0% { box-shadow: 0 0 0 0 #00f5ff44; }
  100% { box-shadow: 0 0 12px 4px #00f5ff88; }
}
.shadow-electric-lg {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}
</style>
<!-- SVG symbol icons建议放在index.html或App.vue全局 -->
<!--
<svg style="display:none">
  <symbol id="icon-cash" viewBox="0 0 24 24"><path d="M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2zm16 0v10M5 7v10m2-6h10m-5 3a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" stroke="currentColor"/></symbol>
  <symbol id="icon-industry" viewBox="0 0 24 24"><path d="M3 21V9l7 6V9l7 6V3h4v18z" stroke="currentColor"/></symbol>
  <symbol id="icon-tech" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor"/><path d="M8 12h8M12 8v8" stroke="currentColor"/></symbol>
  <symbol id="icon-finance" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" stroke="currentColor"/><path d="M7 7v10M17 7v10M7 12h10" stroke="currentColor"/></symbol>
  <symbol id="icon-culture" viewBox="0 0 24 24"><path d="M12 2v20M2 12h20" stroke="currentColor"/></symbol>
  <symbol id="icon-env" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor"/><path d="M8 12h8M12 8v8" stroke="currentColor"/></symbol>
  <symbol id="icon-job" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" stroke="currentColor"/><path d="M7 7v10M17 7v10M7 12h10" stroke="currentColor"/></symbol>
</svg>
-->
